import React from "react";
import {Link, Route} from "react-router-dom"
import Detail from "@/pages/Detail.jsx"
import {Button} from "antd";

export default class Message extends React.Component {
  state = {
    list: [
      {id: "01", title: "消息1"},
      {id: "02", title: "消息2"},
      {id: "03", title: "消息3"},
    ]
  }

  replaceShow = (item) => {
    return () => {
      this.props.history.replace({pathname: "/home/message/detail", state: item})
    }
  }

  pushShow = (item) => {
    // 建议写高阶函数的形式
    return () => {
      this.props.history.push({pathname: "/home/message/detail", state: item})
    }
  }

  render() {
    let {list} = this.state
    return (
        <div>
          <ul>
            {
              list.map(item => {
                return (
                    <li key={item.id}>
                      {/*给路由组件传递params参数*/}
                      {/*<Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>*/}

                      {/*给路由传递search参数*/}
                      {/*<Link to={`/home/message/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link>*/}

                      {/*给路由传递state参数*/}
                      <Link replace to={{pathname: "/home/message/detail", state: item}}>{item.title}</Link>
                      &nbsp;
                      <Button onClick={this.pushShow(item)}>push查看</Button>
                      &nbsp;
                      <Button onClick={this.replaceShow(item)}>replace查看</Button>
                    </li>
                )
              })
            }
          </ul>
          <hr/>
          {/*声明接收params参数*/}
          {/*<Route path="/home/message/detail/:id/:title" component={Detail}></Route>*/}

          {/*search传递参数，正常写即可*/}
          {/*<Route path="/home/message/detail" component={Detail}></Route>*/}

          {/*state传递参数，正常写即可*/}
          <Route path="/home/message/detail" component={Detail}></Route>
        </div>
    )
  }
}